<template>
	<view class="bg-white h-full flex flex-col bg">
		<view class="p-2">
			<u-status-bar></u-status-bar>
			<view class="rounded-full  px-4 text-sm text-gray-400 flex justify-between items-center h-9 my-2" @click="seachFn()" style="background-color: #FAFAFE;">
				<view>点击搜索</view>
				<u-icon name="search" size="22"></u-icon>
			</view>
			<u-tabs :list="tabs.list" :current="tabs.index" @change="changetabs" scrollable lineWidth="0" :activeStyle="{
				color: '#ff0000',
				fontWeight: 'bold',
				transform: 'scale(1.05)'
			}"></u-tabs>
		</view>
		<view class="flex-1 overflow-auto" id="lzmescroll" style="background-color: #fcfcfc;">
			<swiper :style="{height: height+ 'px'}" :current="tabs.index" @change="swiperChange">
				<swiper-item v-for="(tab,i) in tabs.list" :key="i">
					<recommend :index="i" :tabs="tabs.list" :height="height"
					 :ref="'mescrollItem'+i" :i="i"
					></recommend>
				</swiper-item>
			</swiper>
		</view>
		<u-no-network></u-no-network>
	</view>
</template>

<script>
	// import classification from './components/classification.vue'
	import recommend from './components/recommend.vue'
	let that
	export default {
		components:{
			recommend,
		},
		data() {
			return {
				height:'60%',
				tabs: {
					index: 0,
					list: []
				},
			}
		},
		onLoad(e) {
			that = this;
			// 获取分类
			this.getTabs()
			setTimeout(() => {
				this.getSwiperHeight()
			},500)
		},
		methods: {
			// 获取swipe高度
			getSwiperHeight(){
				const query = uni.createSelectorQuery().in(this);
				query.select("#lzmescroll").boundingClientRect((data) => {
					if (data) {
						// #ifdef H5
						this.height = data.height
						// #endif
						// #ifndef H5
						this.height = data.height - 60
						// #endif
					}
				}).exec();
			},
			changetabs(data){
				this.tabs.index = data.index
			},
			// 轮播菜单
			swiperChange(e){
				this.tabs.index = e.detail.current
			},
			// 搜索
			seachFn(){
				uni.navigateTo({
					url: '/pages/seach/seach',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			// 获取分类
			getTabs() {
				let req = {}
				uni.$u.http.get('/index/nav', {params:req}).then(res => {
					if (res.code == 1 && res.data ) {
						this.tabs.list = [{name: '推荐',id: '-1'},...res.data.list]
						uni.setStorageSync('nav-list', this.tabs.list);
					} else {
						this.tabs.list = []
					}
				})
			},
			// 点击标题
			tabIndex(index) {
				this.tabs.index = index
			},
		}
	}
</script>

<style lang="scss">
.active{
	font-weight: bold;color: red;font-size: 16px;
}
.bg{
	background: linear-gradient(to right, #F3E9FD, #E1F2FA);
}
.scroll-view_H{
	width: 100%;display: flex;white-space: nowrap;
}
</style>